<template>
  <div>
    <el-row>
      <el-col :span="8">
          <el-button @click="exportData" style="float:left;" type="success">
            <img src="../../assets/daoru.png" alt=""> 导出
          </el-button>
          <el-upload action="xxxxxxxxxx" style="text-align:left;display:inline-block;width:150px;height:38px;overflow: hidden;margin-left:10px">
            <el-button type="success">
              <img src="../../assets/daochu.png" alt=""> EXCEL导入
            </el-button>
          </el-upload>
      </el-col>
      <el-col :span="16" align="right">
        <el-button type="primary" @click="addNewRecord">
            <i class="el-icon-plus"></i>
            添加重点排查地区
        </el-button>
        <el-input style="width:230px" v-model="filters.orgMemberName" placeholder="请输入地区名称"></el-input>
        <!-- <el-input style="width:230px" v-model="filters.servedPersonName" placeholder="地区"></el-input> -->
        <el-select v-model="filters.areaType" placeholder="请输入地区类型"></el-select>
        <el-button type="primary" @click="getAllRecordInfo" icon="search">查询</el-button>
        <el-button type="primary" @click="searchAll">
          <i class="el-icon-loading"></i> 刷新</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" style="margin-top:10px">
        <el-table :data="serverInfo" style="width:100%">
          <el-table-column prop="orgMServedPID" label="治安重点地区名称" align="center">
          </el-table-column>
          <el-table-column prop="orgMemberName" label="治安突出问题" align="center">
          </el-table-column>
          <el-table-column prop="servedPersonName" label="涉及区域类型" align="center">
          </el-table-column>
          <el-table-column prop="serverDate" label="整治牵头单位" align="center">
          </el-table-column>
          <el-table-column label="整治牵头负责人" align="center">
              <template scope="scope">
                  李四
              </template>
          </el-table-column>
          <el-table-column label="整治时限" align="center">
              <template scope="scope">
                  2018-1-1
              </template>
          </el-table-column>
          <el-table-column prop="serverDate" label="操作" align="center">
            <template scope="scope">
              <el-button type="text" @click="watchDetail(scope.row)">查看详情</el-button>
              <el-button type="text" @click="editById(scope.row)">编辑</el-button>
              <el-button type="text" @click="deleteById(scope.row.orgMServedPID)" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" align="right" style="margin-top:10px">
        <el-pagination layout="prev, pager, next" :total="totalInfo" @current-change="handleCurrentChange">
        </el-pagination>
      </el-col>
    </el-row>

    <el-dialog title="服务详情" :visible.sync="dialogVisible" @close="closeDialog">
      <table class="userInfoEditTable" style="border-collapse:collapse;background-color:white;" width="100%" cellspacing="0">
        <tr>
          <td class="tb_label">服务人</td>
          <td>
             <span>{{servedDetail.orgMemberName}}</span>
          </td>
        </tr>
        <tr>
          <td class="tb_label">服务对象</td>
          <td>
            <span>{{servedDetail.servedPersonName}}</span>
          </td>
        </tr>
        <tr>
          <td class="tb_label">服务内容</td>
          <td>
            <el-input :rows="areaRow" v-model="servedDetail.serverInf" disabled type="textarea"></el-input>
          </td>
        </tr>
        <tr>
          <td class="tb_label">创建时间</td>
          <td>
            {{servedDetail.serverDate}}
          </td>
        </tr>
      </table>
    </el-dialog>
  </div>
</template>

<script>
import { fetchServedRecord, deleteServedRecordById, updateServedRecordById } from '@/api/zonghezhili/duiwujianshe'

export default {
  data() {
    return {
      rowNumber:3,
      areaRow:8,
      dialogVisible: false,
      filters: {
        orgMemberName: null, // 服务人姓名
        servedPersonName: null, // 服务对象姓名
        page: 1,
        pageSize: 10
      },
      serverInfo: [{
        orgMServedPID: '茅山镇',  //编号
        orgMemberID: 1,
        orgMemberName: '劳务纠纷',    //组织成员姓名
        servedPersonID:1,
        servedPersonName: '三不管地带', //被服务对象姓名
        serverInf: '倒开水',    //服务内容
        serverDate: '茅山镇派出所'   //服务日期
      }],
      servedDetail:{ // 服务记录详细信息

      },
      totalInfo: 100,
      isEdit: false,
      editTemp: {}
    }
  },
  methods: {
    //翻页
    handleCurrentChange(val) {
      this.filters.page = val
    },
    //获取所有服务信息
    getAllRecordInfo() {
      // fetchServedRecord(this.filters).then(res=>{
      //   this.serverInfo = res.data
      // })
    },
    //通过id删除服务记录
    deleteById(id) {
      this.$confirm('确认删除此服务记录吗? 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // deleteServedRecordById(id).then(res=>{

        // })
      }).catch(() => {
        this.getAllRecordInfo()
        this.$message({
          type: 'info',
          message: '取消！'
        });
      });
    },
    // 查询所有信息
    searchAll() {
      this.filters = {
        orgMemberName: null,
        servedPersonName: null,
        page: 1,
        pageSize: 10
      }
      this.getAllRecordInfo()
    },
    //编辑更新
    editById(row) {
      
    },
    exportData(){

    },
    // 添加新的记录
    addNewRecord(){
      this.$router.push('addNewServedRecord')
    },
    watchDetail(row){
      this.dialogVisible = true
      this.servedDetail = row
    },
    closeDialog(){
      this.isEdit = false
    }
  },
  mounted() {
    this.getAllRecordInfo()
  }
}
</script>

<style scoped>
.userInfoEditTable,
.userInfoEditTable td {
  border: 1px solid darkgrey;
  padding: 10px;
}
.tb_label{
  width: 12%;
}
</style>
